<template>
  <a-drawer
    v-model:open="props.visible"
    class="custom-class"
    root-class-name="root-class-name"
    :root-style="{ color: 'blue' }"
    style="color: red"
    title="Basic Drawer"
    placement="right"
  >
    <!-- 布局样式 -->
    <a-divider class="divider" orientation="center">
      <notification-outlined />
      布局样式
    </a-divider>
    <div class="layout-box">
      <a-tooltip
        title="纵向"
        placement="top"
        :mouseEnterDelay="0.2"
        class="layout-vertical box"
        @click="clayout('vertical')"
      >
        <div>
          <div class="layout-dark"></div>
          <div class="layout-container">
            <div class="layout-light"></div>
            <div class="layout-content"></div>
          </div>
        </div>
      </a-tooltip>

      <a-tooltip
        title="经典"
        placement="top"
        :mouseEnterDelay="0.2"
        class="layout-classic box"
        @click="clayout('classic')"
      >
        <div>
          <div class="layout-dark"></div>
          <div class="layout-container">
            <div class="layout-light"></div>
            <div class="layout-content"></div>
          </div>
        </div>
      </a-tooltip>

      <a-tooltip
        title="横向"
        placement="top"
        :mouseEnterDelay="0.2"
        class="layout-transverse box"
        @click="nolayout"
      >
        <div>
          <div class="layout-dark"></div>
          <div class="layout-content"></div>
        </div>
      </a-tooltip>

      <a-tooltip
        title="分栏"
        placement="top"
        :mouseEnterDelay="0.2"
        class="layout-columns box"
        @click="nolayout"
      >
        <div>
          <div class="layout-dark"></div>
          <div class="layout-light"></div>
          <div class="layout-content"></div>
        </div>
      </a-tooltip>
    </div>
  </a-drawer>
</template>
<script lang="ts" setup>
import { NotificationOutlined } from '@ant-design/icons-vue';
import { useGlobalStore } from '@/store/modules/global';
import { message } from 'ant-design-vue';

const props = defineProps(['visible']);
const GlobalStore = useGlobalStore();

const clayout = (key: string) => {
  GlobalStore.changeLayout(key);
};
const nolayout = () => {
  message.info('施工中-_-');
};
</script>
<style lang="scss" scoped>
@use './index.scss';
</style>
